<template>
  <article class="blog-content--item typo">
    <ArticleContentInfo :info="info" />
    <!-- 插图 -->
    <img :src="article.cover" alt="!" class="blog-item--illu" />
    <div class="blog-item--content" v-html="article.content" />
  </article>
</template>

<script setup lang="ts">
import { computed, withDefaults } from 'vue'

import ArticleContentInfo from './ArticleContentInfo.vue'
let props = withDefaults(
  defineProps<{
    article: {
      title: string
      author: { nickName: string }
      likes: number
      hits: number
      conment_num: number
      date: any
      cover: string
      content: string
      like_users: any,
      id: string
    }
  }>(),
  {
    article: () => ({
      title: '默认标题',
      author: { nickName: '默认名称' },
      likes: 0,
      hits: 0,
      conment_num: 0,
      date: Date.now(),
      cover: '#',
      content: '',
      like_users: [],
      id: ''
    }),
  },
)
let nickName = computed<string>(() => {
return props.article?.author?.nickName ?? '默认名称'
})
let info = computed(() => {
  return {
        title: props.article.title,
        nickName: nickName.value,
        likes: props.article.likes,
        hits: props.article.hits,
        conment_num: props.article.conment_num,
        date: props.article.date,
        id: props.article.id,
        like_users: props.article.like_users,
      }
})

</script>
<style lang="less" scoped>
@import url('@/assets/css/typo.less');
</style>
